<template>
  <div class="filter-device-container">
    <van-tree-select
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <ul
          class="filter-list"
          v-if="active === 0"
        >
          <li @click="chooseDatetime(1)">
            <div class="tiem-box">
              <div>开始时间</div>
              <div class="reigth-text"><span class="tiem-value-text">{{startTime}}</span><i class="van-icon van-icon-arrow tiem-right-icon" />
              </div>
            </div>
          </li>
          <li @click="chooseDatetime(2)">
            <div class="tiem-box">
              <div>结束时间</div>
              <div class="reigth-text"><span class="tiem-value-text">{{endTime}}</span><i class="van-icon van-icon-arrow tiem-right-icon" />
              </div>
            </div>
          </li>
        </ul>
        <ul
          class="filter-list"
          v-if="active === 1"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in orderSourceData"
            :key="item.value"
            @click="chooseOrderSource(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <ul
          class="filter-list"
          v-if="active === 2"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in orderStatusData"
            :key="item.value"
            @click="chooseOrderStatus(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
      </template>
    </van-tree-select>

    <div class="operate-box">
      <div
        class="operate-btn cancel-btn"
        @click="cancelSearch"
      >取 消</div>
      <div
        class="operate-btn"
        @click="submit"
      >确 定</div>
    </div>

    <van-popup
      v-model="showDateTimePicker"
      position="bottom"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :title="datetimePickerTitle"
        cancel-button-text="清除"
        @confirm="confirmFn"
        @cancel="cancelFn"
      />
    </van-popup>

  </div>
</template>

<script>
import dayjs from 'dayjs';
import { TreeSelect, Icon, Popup, DatetimePicker } from 'vant';
import { getModelList, getDeviceGroupList } from '@/api/deviceManage.js';

export default {
  name: 'SearchFilterEngineer',
  components: {
    [TreeSelect.name]: TreeSelect,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  props: ['typeOrder'],
  data() {
    return {
      active: 0,
      items: [{ text: '起止时间' }, { text: '工单来源' }, { text: '工单状态' }],
      orderSourceData: [], //工单类型数据
      orderSource: '',
      orderStatusData: [], //工单状态数据
      orderStatus: '',
      showDateTimePicker: false,
      datetimePickerTitle: '',
      datetimeType: '',
      currentDate: new Date(),
      startTime: '点击选择',
      endTime: '点击选择'
    };
  },
  watch: {
    typeOrder: function (newValue) {
      this.orderSourceData = [];
      let typeArr = [];
      if (this.typeOrder === 0) {
        typeArr = ['手动创建', '报警转工单', '上报工单'];
      } else {
        typeArr = ['手动创建', '保养转工单'];
      }
      typeArr.map((item, index) => {
        this.orderSourceData.push({
          text: item,
          value: index + 1,
          checked: false
        });
      });
    }
  },
  created() {
    this.createOrderSourceData();
    this.createOrderStatusData();
  },
  methods: {
    // 选择起止时间
    chooseDatetime(type) {
      this.datetimePickerTitle = type === 1 ? '选择开始时间' : '选择结束时间';
      this.datetimeType = type;
      this.showDateTimePicker = true;
    },
    // 确认时间选择
    confirmFn(value) {
      let dateTime = dayjs(value).format('YYYY/MM/DD');
      if (this.datetimeType === 1) {
        this.startTime = dateTime;
      } else {
        this.endTime = dateTime;
      }
      this.showDateTimePicker = false;
    },
    // 取消时间选择
    cancelFn() {
      if (this.datetimeType === 1) {
        this.startTime = '点击选择';
      } else {
        this.endTime = '点击选择';
      }
      this.showDateTimePicker = false;
    },
    // 创建工单类型数据
    createOrderSourceData() {
      this.orderSourceData = [];
      let typeArr = [];
      if (this.typeOrder === 0) {
        typeArr = ['手动创建', '报警转工单', '上报工单'];
      } else {
        typeArr = ['手动创建', '保养转工单'];
      }
      typeArr.map((item, index) => {
        this.orderSourceData.push({
          text: item,
          value: index + 1,
          checked: false
        });
      });
    },
    // 选择类型
    chooseOrderSource(index) {
      if (!this.orderSourceData[index].checked) {
        for (let i in this.orderSourceData) {
          if (parseInt(i) === parseInt(index)) {
            this.orderSourceData[i].checked = true;
          } else {
            this.orderSourceData[i].checked = false;
          }
        }
        this.orderSource = this.orderSourceData[index].value;
      } else {
        this.orderSourceData[index].checked = !this.orderSourceData[index].checked;
        this.orderSource = '';
      }
    },
    // 创建工单状态数据
    createOrderStatusData() {
      this.orderStatusData = [];
      let statusArr = ['已创建', '已派单', '已接单', '已完成', '已取消'];
      statusArr.map((item, index) => {
        this.orderStatusData.push({
          text: item,
          value: index + 1,
          checked: false
        });
      });
    },
    // 选择设备状态
    chooseOrderStatus(index) {
      if (!this.orderStatusData[index].checked) {
        for (let i in this.orderStatusData) {
          if (parseInt(i) === parseInt(index)) {
            this.orderStatusData[i].checked = true;
          } else {
            this.orderStatusData[i].checked = false;
          }
        }
        this.orderStatus = this.orderStatusData[index].value;
      } else {
        this.orderStatusData[index].checked = !this.orderStatusData[index].checked;
        this.orderStatus = '';
      }
    },

    // 确定
    submit() {
      let pram = {
        startTime: this.startTime !== '点击选择' ? new Date(this.startTime + ' 00:00:00').getTime() / 1000 : '',
        endTiem: this.endTime !== '点击选择' ? new Date(this.endTime + ' 23:59:59').getTime() / 1000 : '',
        orderSource: this.orderSource,
        orderStatus: this.orderStatus
      };
      this.$emit('submitSearch', pram);
    },
    // 取消
    cancelSearch() {
      this.$parent.showFilterOrder = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-device-container {
  position: absolute;
  top: 1.226667rem;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 1.226667rem);
  background-color: #fff;

  .van-tree-select {
    flex: 1;
    z-index: 999;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: var(--color-primary);
  }

  .filter-list {
    padding: 0.16rem 0.426667rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .operate-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .operate-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 1.066667rem;
      color: #fff;
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: var(--color-primary);

      &.cancel-btn {
        color: var(--color-deep-gray);
        background-color: #fff;
        border: 1px solid var(--border-color);
      }
    }
  }
}
//时间
.tiem-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .reigth-text {
    margin-top: -0.026667rem;
  }
  .tiem-value-text {
    color: #6f6d6d;
    font-size: 0.373333rem;
    margin-right: 0.133333rem;
  }
  .tiem-right-icon {
    color: #cccccc;
    font-size: 0.426667rem;
  }
}
</style>